<template>
  <div>
    <!-- 访客记录-详情 -->
    <public-modal
      width="1000px"
      :footer="false"
      title="申诉详情页"
      modalStyle="detailModal"
      :publicVisible="publicVisible"
      cancelContext="拒绝"
      confirmContext="通过"
      @handleOk="handleOk"
      @cancel="cancel"
    >
      <div slot="content">
        <div class="common-title">
          <div class="icon"></div>
          <div class="content">申诉企业</div>
        </div>

        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">单位名称</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ companyInfo.companyName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ companyInfo.companyName || '暂无' }}</div>
              </a-tooltip>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">所属行业</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ informationInfo.informationName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ informationInfo.informationName || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div>
            <div class="info-wrap f1">
              <div class="label common-lable">单位办公地址</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ companyInfo.addressDetail || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ companyInfo.addressDetail || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
        </div>

        <div class="common-title">
          <div class="icon"></div>
          <div class="content">申诉内容</div>
        </div>

        <div class="content-wrapper">
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">申诉时间</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCompanyComplainInfo.createTime || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCompanyComplainInfo.createTime || '暂无' }}</div>
              </a-tooltip>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">检查类型</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.industryExamineName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.industryExamineName || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">检查时间</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.checkTime || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.checkTime || '暂无' }}</div>
              </a-tooltip>
            </div>
            <div class="info-wrap f1">
              <div class="label common-lable">检查民警</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ policeCheckTaskInfo.policeUserName || '暂无' }} </span>
                </template>
                <div class="value common-value">{{ policeCheckTaskInfo.policeUserName || '暂无' }}</div>
              </a-tooltip>
            </div>
          </div>
          <div class="flex">
            <div class="info-wrap f1">
              <div class="label common-lable">申诉说明</div>
              <div class="value common-value">{{ policeCompanyComplainInfo.companyContent || '暂无' }}</div>
            </div>
          </div>
          <div
            class="flex"
            v-if="
              policeCompanyComplainInfo.appealImageInfoList && policeCompanyComplainInfo.appealImageInfoList.length > 0
            "
          >
            <div class="info-wrap f1">
              <div class="label common-lable flex justify-center align-center" style="height: 100%">图片</div>
              <div class="img-wrap flex" style="padding: 10px 16px">
                <img
                  v-for="(item, index) in policeCompanyComplainInfo.appealImageInfoList"
                  :key="index"
                  class="cursor cusImg"
                  :id="item.path"
                  @click="werImg(item.path)"
                  :src="`${imgPrefix + item.path}`"
                  :data-original="`${imgPrefix + item.path}`"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer"></div>
    </public-modal>
  </div>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import publicModal from '@/components/publicModal'
import { complainRecord } from '@/api/company'
import { comMethods } from '@/mixins/comMethods'
export default {
  name: 'detailModal',
  components: { publicModal },
  mixins: [comMethods],
  data() {
    return {
      details: {},
      publicVisible: false,
      companyInfo: [],
      informationInfo: [],
      policeCheckTaskInfo: [],
      policeCompanyComplainInfo: [],
      isShowEvidenceContext: false,
      isShowLegalBvasisContext: true,
    }
  },
  methods: {
    show(records) {
      this.details = records
      this.publicVisible = true
      this.getComplainRecord()
    },
    async getComplainRecord() {
      let {
        result: { companyInfo, informationInfo, policeCheckTaskInfo, policeCompanyComplainInfo },
      } = await complainRecord({ id: this.details.id })
      this.companyInfo = companyInfo
      this.informationInfo = informationInfo
      this.policeCheckTaskInfo = policeCheckTaskInfo
      this.policeCompanyComplainInfo = policeCompanyComplainInfo
    },
    handleOk() {
      this.publicVisible = false
    },
    cancel() {
      this.publicVisible = false
    },
    werImg(id) {
      console.log(id, '1')
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        zIndex: '9999',
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}
/deep/ .modalFooter {
  height: 0 !important;
}
.cusImg {
  width: 233px;
  height: 150px;
  object-fit: cover;
  &:nth-child(2) {
    margin: 0 16px;
  }
}
</style>
